Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rollup-plugin-sass

Package Overview
Dependencies
Maintainers
0
Versions
70
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rollup-plugin-sass

Rollup Sass files.

  • 1.14.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
22K
decreased by-1.13%
Maintainers
0
Weekly downloads
 
Created
Source

rollup-plugin-sass CI issues npm mit Coverage Status

Installation

npm install rollup-plugin-sass -D

Usage

// rollup.config.js
import sass from 'rollup-plugin-sass';

export default {
  input: 'index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs',
  },
  plugins: [sass()],
};
rollup.config.ts

Add allowSyntheticDefaultImports, or esModuleInterop (enables allowSyntheticDefaultImports), to tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterOp": true
  }
}

Reference: (https://www.typescriptlang.org/tsconfig#esModuleInterop)

Write rollup.config.ts:

// rollup.config.ts
import sass from 'rollup-plugin-sass';

// ...

Profit.

Options

output

  • Type: Boolean|String|Function (default: false)
sass({
  // Default behaviour disable output
  output: false,

  // Write all styles to the bundle destination where .js is replaced by .css
  output: true,

  // Filename to write all styles
  output: 'bundle.css',

  // Callback that will be called ongenerate with two arguments:
  // - styles: the concatenated styles in order of imported
  // - styleNodes: an array of style objects:
  //  [
  //    { id: './style1.scss', content: 'body { color: red };' },
  //    { id: './style2.scss', content: 'body { color: green };' }
  //  ]
  output(styles, styleNodes) {
    writeFileSync('bundle.css', styles);
  },
});

insert

  • Type: Boolean (default: false)

If you specify true, the plugin will insert compiled CSS into <head/> tag, via utility function that it will output in your build bundle.

sass({
  insert: true,
});

processor

  • Type: Function

If you specify a function as processor which will be called with compiled css before generate phase.

import autoprefixer from 'autoprefixer';
import postcss from 'postcss';

sass({
  // Processor will be called with two arguments:
  // - style: the compiled css
  // - id: import id
  processor: (css) =>
    postcss([autoprefixer])
      .process(css)
      .then((result) => result.css),
});

The processor also support object result. Reverse css filLed for stylesheet, the rest of the properties can be customized.

sass({
  processor(code) {
    return {
      css: '.body {}',
      foo: 'foo',
      bar: 'bar',
    };
  },
});

Otherwise, you could do:

import style, { foo, bar } from 'stylesheet';
Exporting sass variable to *.js

Example showing how to use icss-utils to extract resulting sass vars to your *.js bundle:

const config = {
  input: 'test/fixtures/processor-promise/with-icss-exports.js',
  plugins: [
    sass({
      processor: (css) =>
        new Promise((resolve, reject) => {
          const pcssRootNodeRslt = postcss.parse(css),
            extractedIcss = extractICSS(pcssRootNodeRslt, true),
            cleanedCss = pcssRootNodeRslt.toString(),
            out = Object.assign({}, extractedIcss.icssExports, {
              css: cleanedCss,
            });
          // console.table(extractedIcss);
          // console.log(out);
          resolve(out);
        }),
      options: sassOptions,
    }),
  ],
};

See the Input file for example on how to access the exported vars.

runtime

  • Type: Object (default: sass)

If you specify an object, it will be used instead of sass. You can use this to pass a different sass compiler (for example the node-sass npm package).

options

  • Type: Object

Options for sass or your own runtime sass compiler.

If you specify data, the plugin will treat as prepend sass string. Since you can inject variables during sass compilation with node.

sass({
  options: {
    data: '$color: #000;',
  },
});

include

  • Type: string | string[]
  • Default: ['**/*.sass', '**/*.scss']

Glob of sass/css files to be targeted.

sass({
  include: ['**/*.css', '**/*.sass', '**/*.scss'],
});

exclude

  • Type: string | string[];
  • Default: 'node_modules/**'

Globs to exclude from processing.

sass({
  exclude: 'node_modules/**',
});

License

MIT elycruz, BinRui.Guan

Keywords

FAQs

Package last updated on 30 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc